<!doctype html>
<html>
<head>
<meta charset="utf-8">
<TITLE>论坛</TITLE>
<Link rel="stylesheet" type="text/css" href="style/style.css" />
</HEAD>

<BODY>

<div id="app">

<DIV>
	<IMG src="image/logo.gif">
</DIV>

<!--      用户信息、登录、注册        -->
<DIV class="h" id="logindiv">
	<span v-if="loginStatus == 1">
		<input type="hidden" value="yes" />
		欢迎您 <a href="#">{{userInfo.uname}}</a>
		<a href="javascript:void(0);" @click="openUserHtml()">个人主页</a>
		<a href="javascript:void(0)" @click="signout()">退出</a>
	</span>
	<span v-if="loginStatus == 0">
		<input type="hidden" value="no" />
		您尚未&nbsp;<a href="login.html">登录</a>
		&nbsp;|&nbsp;<A href="reg.html">注册</A> |
	</span>
</DIV>

<!--      主体        -->
<DIV class="t">
	<TABLE cellSpacing="0" cellPadding="0" width="100%">
		<TR class="tr2" align="center">
			<TD colSpan="2">论坛</TD>
			<TD style="WIDTH: 10%;">主题</TD>
			<TD style="WIDTH: 30%">最后发表</TD>
		</TR>

		<!-- 主版块 -->
		<TR class="tr3">
			<table cellspacing="0" cellpadding="0" width="100%" v-for="father in boardData">
				<tr class="tr3">
					<td colspan="4" v-html="father.boardname"></td>
				</tr>

				<!-- 子版块 -->
				<TR class="tr3" v-for="son in father.sonData">
					<TD width="5%">&nbsp;</TD>
					<TH width="55%" align="left">
						<IMG src="image/board.gif">
<!--						javascript:void(0); 取消a的默认点击动作（就是让它不要把自己提交给自己）-->
						<A href="javascript:void(0);" @click="openListHtml(son.boardid, son.boardname)">{{son.boardname}}</A>
					</TH>
					<!-- 贴子数 -->
					<TD width="10%" align="center" v-html="son.total"></TD>
					<!-- 贴子标题 -->
					<TH>
						<h3 v-if="son.title == '' || son.title == null "> <a href="#">这个板块暂无帖子</a> </h3>
						<span v-else >
							<A href="#">这个板块最新帖子的标题</A>
							<span>
								<a  href="javascript:void(0);" @click="openDetailHtml( son.topicid)">{{son.title}}</a>
							</span><br>
							<A href="#">作者：</A>
							<span>{{son.uname}}</span><br>
							<span>帖子最后修改的时间：{{son.modifytime}}</span>
							<span></span>
						</span>
					</TH>
				</TR>
			</table>
		</TR>


		
	</TABLE>
</DIV>

<BR/>
<CENTER class="gray">源辰信息</CENTER>

</div>

</BODY>

<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script type="text/javascript">
	// 配置访问的地址
	// var base_url = "http://localhost:20001/";	// gateway地址
	// var addr_board = base_url + "bbs-board/";
	var addr_board = "/bbs-board/";   // bbs前一定要加一个 / ，才能： http://localhost:20001/bbs-board/
											   // 			 	不然： http://localhost:20001/bbs-web/bbs-board/
											   // http://localhost:20001/bbs-web/index.html

	// 使用axios时，利用原型模式给axios加入 Authorization头，这样每个请求会加入Authorization头部
	Vue.prototype.axios = axios;
	// 在每次请求时，前端携带token到请求头中
	axios.interceptors.request.use(config => {
		// 从localStorage 或 vuex 中获取 token
		const token = localStorage.getItem("token");
		// 如果有 token 就添加到请求头中
		if (token){
			config.headers.Authorization = token;
		} else {
			config.headers.Authorization = "";
		}
		console.log(token);
		console.log(config);
		return config;
	}, error => {
		return Promise.reject(error);
	});

	let index_app = new Vue({
		el: "#app",
		data: {
			boardData: [],
			loginStatus: 0,
			userInfo: {}
		},
		methods: {
			signout(){
				var _this = this;
				if (localStorage.getItem("token") == null){
					// 本地没有token，则说明用户没有登录
					_this.userInfo = {};
					_this.loginStatus = 0;
					return;
				}
				//
				axios.get("/bbs-security/user/signout").then(data => {
					_this.userInfo = {};
					_this.loginStatus = 0;
					localStorage.removeItem("token");
				});
			},
			home(){
				var _this = this; // 防止变量污染
				axios.get(addr_board + "board/findAllBoard").then(data=>{
					// data 是一个对象，它下面有data属性，这个属性中的数据才是服务端回送的 json
					let result = data.data;
					if (result.code === 0){
						alert("暂无数据！");
						return;
					}

					// 取顶层板块列表
					_this.boardData = result.data["0"];
					// 循环顶层板块
					for (let i=0; i<_this.boardData.length; i++){
						// _this.boardData[i].boardid ： 取顶层板块的编号
						// result.data[顶层板块的编号] ：  取子版块的列表
						_this.boardData[i].sonData = result.data[_this.boardData[i].boardid];
					}
				});
			},
			openUserHtml(){
				// _self代表 在当前页面打开
				var _this=this;
				var userI=_this.userInfo;
				if("MALE"==userI.gender){
					userI.gender="男";
				}else{
					userI.gender="女";
				}
				sessionStorage.setItem(
						"userI",
						JSON.stringify({"uname":userI.uname,"head":userI.head,"regtime":userI.regtime,"gender":userI.gender})
				);
				// _self代表 在当前页面打开
				window.open("/bbs-web/user.html", "_self");
			},
			openListHtml(boardid, boardname){
				// sessionStorage：基于会话的Storage
				// JSON.stringify({json对象})  =>  将json对象转为字符串
				// 在另一个页面取的 boardInfo时候，取出的是字符串，要转化为json对象   =>  JSON.parse( json字符串) 得到json对象
				sessionStorage.setItem(
						"boardInfo",
						JSON.stringify({"boardid": boardid, "boardname": boardname})
				);
				// _self代表 在当前页面打开
				window.open("/bbs-web/list.html", "_self");
			},
			openDetailHtml(topicid){
				// sessionStorage：基于会话的Storage
				// JSON.stringify({json对象})  =>  将json对象转为字符串
				// 在另一个页面取的 boardInfo时候，取出的是字符串，要转化为json对象   =>  JSON.parse( json字符串) 得到json对象
				sessionStorage.setItem(
						"topicInfo",
						JSON.stringify({"topicid": topicid})
				);
				// _self代表 在当前页面打开
				window.open("/bbs-web/detail.html", "_self");
			},
			isOnLine(){
				var _this = this;
				// 如果浏览器的storage中无token，则说明 没有用户登录
				if (localStorage.getItem("token") == null){
					_this.userInfo = {};
					_this.loginStatus = 0;
					return;
				}
				axios.get("/bbs-security/user/loginCheck").then(data=>{
					if (data.data.code === 0){
						_this.loginStatus = 0;
					} else {
						_this.loginStatus = 1;
						_this.userInfo = data.data.data;
					}
				});
			}
		},
		// 页面的挂载
		mounted:function (){
			// 组合多个请求
			axios.all( [this.home(), this.isOnLine()] ).then(axios.spread(function (d1, d2){

			}));
		}
	});
</script>
</HTML>
